<!-- 电力组态预览 -->
<template>
    <div style="overflow:auto;position: relative;">
        <div class="svg-contain">
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background-color:#456e9b" viewBox="0 0 1920 1080" width="100%" height="100%">
            <defs/>
              <g v-for="item in svgLists" :key="item.id" :id= item.id  :title=item.title :transform="'translate('+(item.svgPositionX)+','+(item.svgPositionY)+')' +'rotate('+item.angle+')'" >
                <SvgComponents :height = item.height :color= item.svgColor :width= item.width :type= item.type :tableData= item.tableData :fontSize= item.fontSize :svgText= item.svgText></SvgComponents>
              </g>
          </svg>
        </div>
        <div class="btns-content">
          <el-button type="primary" @click="back">返回编辑</el-button>
        </div>
    </div>
</template>
<script>
import SvgComponents from '@/components/topo/SvgComponents.vue';
export default {
    components: {
      SvgComponents
    },
    data(){
    return{
        svgLists:[],
    }},
    methods:{
        back() {
          this.$router.go(-1)
        },
        getData() {
          this.svgLists=JSON.parse(localStorage.getItem('svginfo'));
        }
    },
    created() {
        this.getData()
    },
}
</script>
<style lang="scss" scoped>
.svg-contain{
  position: fixed;
  left: 0;
  right: 0;
  top: 120px;
  bottom: 0;
}
.btns-content{
  position: fixed;
  left: 20px;
  bottom: 20px;
  button{
    margin-right: 10px;
  }
}
</style>